<template>
    <div class="set-info" :style="contentStyle">
        <wxc-minibar >
            <div class="header-con" slot="middle">
                <text class="header-title">{{title}}</text>
            </div>
             <div class="header-font-title" slot="right" @click="quit">
                <text class="header-font-pr">完成</text>
            </div>
        </wxc-minibar>

        <div class="select-sex" v-if="type == 'sex'">
            <div class="my-info-card b-b-s" @click="changeSix(1)">
                <text class="my-info-card-text">男</text>
                <div class="my-card-cont">
                    <div class="sex-check-not" v-if=" personalDetailsInfo.sex != 1" ></div>
                    <image class="protocol_fl_checkd"  style="width:40px;height:40px;" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png" v-else></image>
                </div>
            </div>

            <div class="my-info-card" @click="changeSix(0)">
                <text class="my-info-card-text">女</text>
                <div class="my-card-cont">
                    <div class="sex-check-not" v-if=" personalDetailsInfo.sex != 0" ></div>
                    <image class="protocol_fl_checkd"  style="width:40px;height:40px;" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/checked.png" v-else></image>
                </div>
            </div>
        </div>


        <div class="select-nice" v-else>
            <div class="my-info-card">
                <input type="text" class="set-nice" placeholder="请输入昵称" v-model="personalDetailsInfo.nickName">
            </div>
        </div>
    </div>
</template>
<script>
    import { Utils, Checkbox} from "weex-ui"
     import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
    import { serialize, getBaseUrl }  from "@/utils/index.js"

    const modal = weex.requireModule('modal')
    let storage = weex.requireModule('storage')
    let navigator = weex.requireModule('navigator')
    const sxglobalEvent = weex.requireModule('globalEvent')

    export default {
        name:'set-info',
        props:['edit-pram'],
        data() {
            return {
                contentStyle:{},
                sex:0,
                nice:'',
                type:'',
                baseURL:'',
                title:'',
                personalDetailsInfo:{
                   nickName:"",
                   sex:0
                }
            }
        },

        methods:{
            changeSix(data) {
                this.personalDetailsInfo.sex = data
                this.save()
            },

            save() {
                this.$emit('setSave', this.personalDetailsInfo)
            },

            quit() {
                this.$emit('setSave', this.personalDetailsInfo, {})
            }
        },

        components: {
            WxcMinibar
        },

        mounted() {
            this.personalDetailsInfo = this.editPram
        
            this.type = this.personalDetailsInfo.sign

            this.title = this.type == 'sex' ? '设置性别' : '设置昵称'

        },

        created() {

            const tabPageHeight = Utils.env.getPageHeight()
            // 获取路径
            this.baseURL = getBaseUrl(weex.config.bundleUrl, true)

            this.contentStyle = {
                'height': tabPageHeight + "px"
            }
        }

        
    }
</script>
<style scoped>
.set-info {
    width: 750px;
    position: relative;
    z-index: 2;
    background-color: rgb(242, 243, 244);
    
}

.set-info-header {
    /* height: 80px; */
    box-shadow: 0px 4px 15px #e5e5e5;
    position: relative;
    z-index: 9;
    opacity: 1;
}

.sex-check-not {
    width:42px;
    height: 42px;
    border-style: solid;
    border-width: 1px;
    border-color: #d5d5d5;
    border-radius: 21px;
}

.b-b-s {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(240,240,240);
}

.my-info-card {
    display: flex;
    width:750px;
    height: 112px;
    background-color: #fff;
    padding-left:32px;
    padding-right:32px;
    box-sizing: border-box;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}


.my-info-card-text {
    font-size: 32px;
    color: #333;
    font-family: PingFangSC-Medium;
}

.set-nice {
    width:686px;
    height: 112px;
    padding-left:32px;
    padding-right:32px;
    color: #333;
}

.header {
    width:750px;
    height: 90px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    position: relative;
}

.header-title {
    font-size: 34px;
    color: #fff;
    font-family: PingFangSC-Regular;
}

.header-img {
    position: absolute;
    left:32px;
    top:0;
    margin-left:0;
}

.header-font {
    position: absolute;
    right:32px;
    top:0;
    margin-left:0;
    display: flex;
    justify-content: center;
    width:100px;
    height: 90px;
    align-items: flex-end;
}

.header-size {
     font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #666666;
}

.header-con {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  flex-direction: row;
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}

.header-font-pr {
  font-size: 28px;
  color: #fff;
}
</style>
